import { StyleSheet } from 'react-native';
import { SCREEN_WIDTH } from '@/utils/resize';

export default StyleSheet.create({
  modal: {
    zIndex: 1,
    top: 0,
    left: 0,
    width: SCREEN_WIDTH,
    position: 'absolute'
  },
  mask: {
    top: 0,
    left: 0,
    width: SCREEN_WIDTH,
    position: 'absolute',
    backgroundColor: 'rgba(0,0,0,.6)'
  },
  hidden: {
    display: 'none'
  },
  content: {
    position: 'relative',
    zIndex: 1
  },
  // top
  top: {
    flexDirection: 'column',
  },
  // bottom
  bottom: {
    flexDirection: 'column',
    justifyContent: 'flex-end'
  },
  //center
  center: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  // left
  left: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  // right
  right: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  }
});